<template>
  <van-row class="app-header" align="center" type="flex" justify="space-between">
    <van-col class="left back" @click="goback">{{back}}</van-col>
    <van-col class="title">{{title}}</van-col>
    <van-col class="right">
      <div class="search">
        <van-icon class="search-icon" name="search" size="18" />
        <input class="search-input" type="text" name="" id="">
      </div>
      <van-image class="avatar" round :src="require('@/assets/logo.png')" />
    </van-col>
  </van-row>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      back: '<',
      search: 'Search'
    }
  },
  computed: {
    title () {
      return this.$route.meta.title
    }
  },
  methods: {
    goback () {
      const path = this.$store.getters.fromPath
      if (path === '/' || path === '') {
        this.$router.push('/home')
      } else {
        this.$router.back()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.app-header{
  margin: 10px;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  .left{
    width: 120px;
    float: left;
  }
  .title{
  }
  .right{
    width: 123px;
    display: flex;
    float: right;
    .search{
      color: #999999;
      border: 1px solid #CCC;
      border-radius: 3px;
      margin: 6px;
      .search-input{
        width: 45px;
        height: 18px;
        margin: 0 auto;
        border: none;
        font-size: 11px;
        float: left;
      }
      .search-icon{
        border-left: 1px solid #CCC;
        padding: 1px;
        float: right;
      }
    }
    .avatar{
      margin-left: 4px;
      float: right;
      width: 35px;
      height: 35px;
    }
  }

}

</style>
